<template>
	<view>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<!-- 遮罩弹窗 -->
			<!-- <graceShade background="rgba(0,0,0,0.8)" :show="show">
				<view>
					<image @tap="gopath()" style="width: 522rpx;height: 700rpx" :src="img_url"></image>
					<view @tap="closeShade()" class="grace-flex-center" style="margin-top: 50rpx;">
						<image src="../../static/guanbiyouhuijuan.png" style="width: 57rpx;height: 57rpx;"></image>
					</view>
				</view>
			</graceShade> -->
			<!-- 顶部背景图 -->
			<view>
				<image src="../../static/background.png" style="width: 750rpx;height: 323rpx;" mode=""></image>
			</view>
			<!--
			<view>
				<image src="../../static/yinliantu.png" style="width: 328rpx;height: 85rpx;position: absolute;top: 126rpx;z-index: 999;left: 202rpx;" mode=""></image>
			</view>
			-->
			<!-- 顶部背景图 -->
			
			<!-- 客服轮播热线提醒 -->
			<view class="grace-rows grace-flex-vcenter" style="width:750rpx;background:rgba(255,255,255,1);margin-top: 10rpx;margin-bottom: 22rpx;">
				<view class="grace-body" v-if="speakerMsgs.length >= 1">
					<grace-speaker :phoneNumber="phoneNumber" height="64rpx" :vertical="true" iconColor="#E76B61" :interval="3000"
					 iconClass="grace-icons icon-speaker" :msgs="speakerMsgs"></grace-speaker>
				</view>
				<view class="grace-body" v-else>
					<hr style="background-color: #CCCCCC;height: 1rpx;">
				</view>
			</view>
			<!-- 客服轮播热线提醒 -->
			
			<!-- 更多功能模块数据 -->
			<view class="grace-flex-center">
			<view class="subpage" v-for="(item,index) in more" :key="index" @tap="cards(item)">
				<view style="transform: translateY(15rpx);color: #5A5A5A;">
				<image :src="item.imgs" mode="" style="width: 55rpx;height: 51rpx;margin-bottom: -13rpx;"></image>
				<view>
					<text style="font-size: 18rpx;">{{item.name}}</text>
				</view>
				</view>
			</view>
			</view>
			<!-- 更多功能模块数据 -->
			
			<!-- 还款、云刷跳转按钮 -->
			<view class="grace-flex-center" style="position: relative;top: 0rpx; width: 750rpx;height: 220rpx">
				<view class="grace-columns" style="text-align: center; position: relative;top: 28rpx; margin: 0 auto;" v-for="(i,index) in option"
				 :key="index" @tap="tourl(i)">
					<image :src="i.imgs" style="width: 146rpx;height: 146rpx;margin: 0 auto;"></image>
					<text style="color: #343434;font-size:24rpx;position: relative;top: 12rpx;">{{ i.name }}</text>
				</view>
			</view>
			<view @tap="gomai">
				<image :src="Advertising" mode="" style="width: 750rpx;height: 360rpx;margin-top: 37rpx;"></image>
			</view>
			<view style="font-size: 20rpx;font-weight: bold;margin-left: 211rpx;margin-top: 40rpx;">
			</view>
			<!-- 轮播图 -->
			<!-- <view>
				<graceswipercard @tanchuang="tanchuang2" :swiperItems="swiperItemss" height="150rpx" spacing="0rpx" padding="0px"
				 borderRadius="0rpx" indicatorActiveColor="rgba(204,41,14,1)" :scale="false"></graceswipercard>
			</view> -->
			
			
			<!-- 轮播图 -->

			<!-- 底部通知 -->
			<graceBottomDialog :show="show3" v-on:closeDialog="closeDialog3">
				<scroll-view scroll-y slot="content" style="background:rgba(255,234,169,1)">
					<!-- 购买抵用券数据组件 -->
					<graceTanKuang :tejia="tejia" @closeDialog3="closeDialog3"></graceTanKuang>
				</scroll-view>
			</graceBottomDialog>
			<!-- 客服帮助 -->
			<view class="kef_s" @tap="qiaozhuandaokehu">
				<image :style="'left:'+moveX+'px;top:'+moveY+'px'" @touchstart="drag_start" @touchmove.prevent="drag_hmove" src="/static/kefs.png"
				 mode="" style="width: 158rpx;height:70rpx;transform: translate(4rpx,4rpx);"></image>
			</view>
			<ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>

	</gracePage>
</view>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
	import graceSpeaker from "../../graceUI/components/graceSpeakers.vue";
	import graceswipercard from "../../graceUI/components/graceSwiperCard.vue";
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceShade from "../../graceUI/components/graceShade.vue";
	import graceTanKuang from "../../components/tan-kuang/graceTanKuang.vue";
	export default {
		data() {
			return {
				show3: false, // 券弹框是否显示
				phoneNumber: '19381610495',
				tejia: [],
				is_jump: 0, //签到是否跳转
				urls: "", //如果is_jump为0时,这为请求地址,is_jump为1时这为跳转地址
				show: false,
				img_url: '',
				action: '',
				tiaozhuan: 0,
				u_state: "", //认证状态
				option: [], // 代还功能数据
				Advertising: '' , // 底部广告图
				speakerMsgs: [], // 消息广播数据
				more: [], // 更多功能模块数据
				xians: false,

				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '', 
				level_grade: '', // 用户等级编号
				loadings: false, // 遮罩显示判断
			};
		},
		onLoad() {
			this.myshows();
			var user = uni.getStorageSync('storage_key');
			console.log(user.id);
			this.level_grade = user.level_grade
			// 判断用户是否登录、id是否存在
			if (!user) {
				uni.navigateTo({
					url: '/pages/user/login'
				})
			}

			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
		},
		// 跳转到商城我的页面
		onUnload() {
			uni.switchTab({
				url: '/pages/personal_center/personal_center'
			})
		},
		onShow() {},
		methods: {
			// 客服微信按钮移动事件
			drag_start(event) {
				console.log(event.touches[0].clientX - event.target.offsetLeft);
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 0) {
					tag[0].clientX = 0
				}
				if (tag[0].clientY < 0) {
					tag[0].clientY = 0
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
			// 跳转到客服聊天页面
			qiaozhuandaokehu() {
				var kehu_phone = uni.getStorageSync('kehu_phone');
				uni.makePhoneCall({
					phoneNumber:kehu_phone
				})
				console.log(kehu_phone);
			},
			// 点击显示购买抵扣券弹框
			gomai(){
				this.purpose()
				this.show3 = true
			},
			// 获取代还等数据模块
			myshows() {
				var vm = this;
				vm.speakerMsgs = [];
				vm.loadings = true
				vm.myPost(
					'api/Configapi/get_daihuan_index', {},
					function(res) {
						// console.log(JSON.stringify(res));
						setTimeout(function(){
							vm.loadings = false
						},500)
						if(res.code == 200){
							vm.option = res.data.energy_block.child
							vm.Advertising = res.data.dow_guanggao.child[0].imgs
							vm.more = res.data.more_index.child
							var notice_list = res.data.notice.child
							uni.setStorageSync('kehu_phone',res.data.service.child[0].phone)
							for (let i = 0; i < notice_list.length; i++) {
								vm.speakerMsgs.push({
									title: notice_list[i].neirong,
									url: '/pages/shanfu/shanfu',
									opentype: "navigate",
								})
							}
						}
					},function(){
						setTimeout(function(){
							vm.loadings = false
						},500)
					});
			},
			// 获取抵扣券弹框数据
			purpose(){
				var vm = this;
				vm.myPost(
					'api/deductioncoupons/get_coupons_config',{},function(res){
						if(res.code == 200){
							vm.tejia = res.data
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}
				)
			},
			// // 抵用券立即购买跳转页面事件
			// gomaiq(id){
			// 	this.show3 = false
			// 	uni.navigateTo({
			// 		url: '/pages/index/buy_coupons?coupons_id='+id
			// 	})
			// 	// this.closeDialog3()
			// },
			// 更多功能模块页面跳转事件
			cards(v){
				console.log(JSON.stringify(v));
				if(v.href=='/pages/profit/profit_daihuan'){
					uni.switchTab({
						url:v.href
					})
				}else{
					uni.navigateTo({
						url:v.href
					})
				}
			
			},
			// 代还功能跳转页面事件
			tourl(i) {
				console.log(i);
				uni.navigateTo({
					url:i.href
				})
				/*
				if(i.name == '代付'){
					uni.navigateTo({
						url:i.href
					})
				}else if(i.name == '快捷'){
					uni.navigateTo({
						url:i.href
					})
				}else if(i.name == '一键升级'){
					uni.navigateTo({
						url:i.href
					})
				}*/
			},
			// 券弹框关闭事件
			closeDialog3: function() {
				this.show3 = false;
			},
			
			// phone() {
			// 	uni.makePhoneCall({
			// 		phoneNumber: this.phoneNumber //仅为示例
			// 	});
			// },
		},
		components: {
			gracePage,
			graceswipercard,
			graceSpeaker,
			graceShade,
			graceBottomDialog,
			graceDialog,
			graceTanKuang
		}
	}
</script>

<style>
	.kef_s {
		position: absolute;
		top: 1100rpx;
		left: 600rpx;
		float: right;
	}
	.subpage{
		display: inline-block;
		width: 153rpx;
		height: 108rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 31rpx;
		margin-right: 26rpx;
		text-align: center;
		
	}
	
	.subpage_2{
		display: inline-block;
		width: 153rpx;
		height: 108rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		transform: translateY(0rpx);
		text-align: center;
	}
	.subpag{
		display: inline-block;
		width: 153rpx;
		height: 108rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		/* transform: translateY(-8rpx); */
		text-align: center;
	}
	
	.status_bar {
		height: var(--status-bar-height);
		width: 750rpx;
	}

	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}

	.cpt-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.8;
		z-index: 999;
	}
</style>
